<template>
  <!-- 按钮组 -->
  <el-row class="row-bg" justify="space-between">
    <el-col :span="12">
      <el-form-item class="el-form-item">
        <el-button type="primary" @click="addCatalogue">新增标题</el-button>
      </el-form-item>
    </el-col>
  </el-row>
  <el-table
    :data="dataList"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    center
  >
    <el-table-column prop="name" label="一级标题" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          v-if="scope.row.children"
          @click="handleClickAddTwo(scope.row)"
        >
          新增二级标题
        </el-button>
        <el-button
          link
          type="primary"
          size="small"
          @click="savePrimaryEdit(scope.row)"
          >编辑</el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          @click="deleteclick(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <Dialog
    v-model:dialogFormVisible="dialogFormVisible"
    :title="title"
    @handleClick="handleClick"
    @handleClose="handleClose"
  >
    <template #center>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        status-icon
        label-position="right"
      >
        <el-form-item :label="nameTitle" prop="name" label-width="120">
          <el-input placeholder="请输入一级标题" v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item
          v-if="title != '新增一级标题'"
          label="id"
          prop="id"
          label-width="120"
        >
          <el-input v-model="ruleForm.id" />
        </el-form-item>
      </el-form>
    </template>
  </Dialog>
  <!-- 二级标题 -->
  <titleTwoDialog
    v-model:dialogVisible="dialogVisible"
    title="新增二级标题"
    @handleClick="handleClick"
    @handleClose="handleClose"
  >
    <template #center>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="二级标题" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
      </el-form>
    </template>
  </titleTwoDialog>
</template>
<script setup>
import Dialog from './dialog.vue';
import titleTwoDialog from './titleTwoDialog.vue';
import { ref, computed } from 'vue';
const { dataList } = defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(['eventFirstTitle', 'handleClickDelete']);
const title = ref('');
const dialogFormVisible = ref(false);
const dialogVisible = ref(false);
const ruleFormRef = ref(null);
const ruleForm = ref({
  name: '',
  type: 1,
  id: '',
  pid: '',
});
// 计算是一级标题还是二级标题
const nameTitle = computed(() => {
  return ruleForm.value.pid == 0 ? '请输入一级标题' : '请输入二级标题';
});

const rules = reactive({
  name: [{ required: true, message: nameTitle, trigger: 'blur' }],
  id: [{ required: true, message: '请输入ID', trigger: 'blur' }],
});
// 新增一级标题
const addCatalogue = () => {
  ruleForm.value.name = '';
  title.value = '新增一级标题';
  ruleForm.value.id = 0;
  dialogFormVisible.value = true;
};
// 编辑一级标题
const savePrimaryEdit = (val) => {
  Object.assign(ruleForm.value, val);
  val.pid == 0
    ? (title.value = '编辑一级标题')
    : (title.value = '编辑二级标题');
  dialogFormVisible.value = true;
};
// 新增二级标题
const handleClickAddTwo = (row) => {
  ruleForm.value.pid = row.id;
  dialogVisible.value = true;
};
// 删除标题
const deleteclick = (row) => {
  emit('handleClickDelete', row);
};
const handleClick = async () => {
  await ruleFormRef.value.validate((valid) => {
    if (valid) {
      emit('eventFirstTitle', ruleForm.value);
      dialogFormVisible.value = false;
      dialogVisible.value = false;
    }
  });
};
const handleClose = (val) => {
  dialogFormVisible.value = val;
  dialogVisible.value = val;
  if (ruleFormRef.value) {
    ruleFormRef.value.clearValidate();
  }
};
</script>
<style lang="scss" scoped></style>
